<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>LocalStorage</title>
    <style>
        html {
            box-sizing: border-box;
            background: url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat;
            background-size: cover;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-family: Futura, "Trebuchet MS", Arial, sans-serif
        }

        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }

        svg {
            fill: white;
            background: rgba(0, 0, 0, 0.1);
            padding: 20px;
            border-radius: 50%;
            width: 200px;
            margin-bottom: 50px;
        }

        .wrapper {
            padding: 20px;
            max-width: 350px;
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
        }

        h2 {
            text-align: center;
            margin: 0;
            font-weight: 200;
        }

        .plates {
            margin: 0;
            padding: 0;
            text-align: left;
            list-style: none;
        }

        .plates li {
            border-bottom: 1px solid rgba(0, 0, 0, 0.2);
            padding: 10px 0;
            font-weight: 100;
            display: flex;
        }

        .plates label {
            flex: 1;
            cursor: pointer;

        }

        .plates input {
            display: none;
        }

        .plates input+label:before {
            content: '⬜️';
            margin-right: 10px;
        }

        .plates input:checked+label:before {
            content: '🌮';
        }

        .add-items {
            margin-top: 20px;
        }

        .add-items input {
            padding: 10px;
            outline: 0;
            border: 1px solid rgba(0, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <!--
      Fish SVG Cred:
      https://thenounproject.com/search/?q=fish&i=589236
   -->

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
        viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
        <g>
            <path
                d="M495.9,425.3H16.1c-5.2,0-10.1,2.9-12.5,7.6c-2.4,4.7-2.1,10.3,0.9,14.6l39,56.4c2.6,3.8,7,6.1,11.6,6.1h401.7   c4.6,0,9-2.3,11.6-6.1l39-56.4c3-4.3,3.3-9.9,0.9-14.6C506,428.2,501.1,425.3,495.9,425.3z M449.4,481.8H62.6L43,453.6H469   L449.4,481.8z" />
            <path
                d="M158.3,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1c-7.8,0-14.1,6.3-14.1,14.1v64.5   C144.2,115.7,150.5,122,158.3,122z" />
            <path
                d="M245.1,94.7c7.8,0,14.1-6.3,14.1-14.1V16.1c0-7.8-6.3-14.1-14.1-14.1C237.3,2,231,8.3,231,16.1v64.5   C231,88.4,237.3,94.7,245.1,94.7z" />
            <path
                d="M331.9,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1s-14.1,6.3-14.1,14.1v64.5   C317.8,115.7,324.1,122,331.9,122z" />
            <path
                d="M9.6,385.2c5.3,2.8,11.8,1.9,16.2-2.2l50.6-47.7c56.7,46.5,126.6,71.9,198.3,71.9c0,0,0,0,0,0   c87.5,0,169.7-36.6,231.4-103.2c5-5.4,5-13.8,0-19.2c-61.8-66.5-144-103.2-231.4-103.2c-72,0-142.2,25.6-199,72.5l-50-47.1   c-4.4-4.1-10.9-5-16.2-2.2c-5.3,2.8-8.3,8.7-7.4,14.6l11.6,75L2.2,370.6C1.3,376.5,4.2,382.4,9.6,385.2z M380.9,230.8   c34.9,14.3,67.2,35.7,95.3,63.6c-10.1,10-20.8,19.2-31.9,27.5c-22.4-3.3-29.6-8.8-30.7-9.7c-4-5.7-11.8-7.7-18.1-4.4   c-6.9,3.6-9.5,12.2-5.9,19.1c1.9,3.5,7.3,10.3,22.4,16c-10.1,5.7-20.5,10.7-31.1,15.1C352.4,320.2,352.4,268.6,380.9,230.8z    M36.3,255.6l29.4,27.7c5.3,5,13.6,5.1,19.1,0.3c53.2-47.6,120.7-73.7,190-73.7c26.9,0,53.2,3.9,78.5,11.3   c-29.3,44.6-29.3,102,0,146.6c-25.3,7.4-51.6,11.3-78.5,11.3c-69,0-136.3-26-189.4-73.2c-2.7-2.4-13.4-6.3-19.1,0.3l-30.1,28.3   l5.7-40C42.2,293,36.3,255.6,36.3,255.6z" />
            <circle cx="398.8" cy="273.8" r="14.1" />
        </g>
    </svg>

    <div class="wrapper">
        <h2>LOCAL TAPAS</h2>
        <p></p>
        <ul class="plates">
            <!-- <li>Loading Tapas...</li> -->
        </ul>
        <form class="add-items">
            <input type="text" name="item" placeholder="Item Name" required>
            <input type="submit" value="+ Add Item">
            <input class="check-all" type="button" value="Check All">
            <input class="uncheck-all" type="button" value="Uncheck All">
            <input class="delete-checkd" type="button" value="Delete Checkd">
            <input class="delete-all" type="reset" value="Delete All">
        </form>
    </div>

    <script>
        const addItems = document.querySelector('.add-items');
        const itemsList = document.querySelector('.plates');
        // localStorage 里面只会储存 String 类型数据，如果传入的是非 String 则会直接使用 toString 转换：({}).toString() //"[object Object]"，这时候就会发生异常
        // 所以存储时使用 JSON.stringify() 将 Object 转换成 String 格式，读取时利用 JSON.parse() 转换为 Object
        let items = JSON.parse(localStorage.getItem('items')) || [];

        const submit = document.querySelector('input[type="submit"]');
        const input = document.querySelector('input[name="item"]')

        /* 完整版 */
        function addItem(e) {
            e.preventDefault(); // 避免提交表单刷新页面的动作
            const text = input.value;
            // 用对象存储localStorage
            const item = {
                text: text, // 存储输入框的返回值
                done: false // 存储checkbox的返回值
            }
            items.push(item); // 推入数组
            this.reset(); // 清空输入框
            populateList(items, itemsList); // 更新列表
            localStorage.setItem('items', JSON.stringify(items));
        }

        // 把更新列表封装成函数, 初始化LocalStorage和更新LocalStorage需要
        function populateList(plates = [], plateslist) {
            // 对每一项数据执行map, 返回新数组, 再通过join转换为字符串
            plateslist.innerHTML = plates.map((plate, index) => {
                return `
                    <li>
                        <input type="checkbox" data-index=${index} id="item${index}" ${plate.done ? 'checked' : ''}>
                        <label for="item${index}">${plate.text}</label>
                    </li>
                `;
            }).join('');
        }

        // 把控制checkbox封装成函数
        function toggleDone(e) {
            if (!e.target.matches('input')) return; // 没有点击到checkbox则返回
            const index = e.target.dataset.index; // 获取该checkbox的元素下标
            items[index].done = !items[index].done // done取反
            populateList(items, itemsList); // 更新列表
            localStorage.setItem('items', JSON.stringify(items)); // 更新localStorage的数据
        }

        addItems.addEventListener('submit', addItem);
        itemsList.addEventListener('click', toggleDone);
        populateList(items, itemsList);

        // 拓展功能
        const checkallBtn = document.querySelector('.check-all');
        const uncheckallBtn = document.querySelector('.uncheck-all');
        const deleteallBtn = document.querySelector('.delete-all');
        const deletecheckdBtn = document.querySelector('.delete-checkd');

        checkallBtn.addEventListener('click', () => {
            items.forEach(item => {
                item.done = true;
            });
            populateList(items, itemsList); // 更新列表
            localStorage.setItem('items', JSON.stringify(items));
        });
        uncheckallBtn.addEventListener('click', () => {
            items.forEach(item => {
                item.done = false;
            });
            populateList(items, itemsList); // 更新列表
            localStorage.setItem('items', JSON.stringify(items));
        });
        deletecheckdBtn.addEventListener('click', () => {
            for (let i = 0; i < items.length; i++) {
                if (items[i].done) items.splice(i, 1);
            }
            populateList(items, itemsList); // 更新列表
            localStorage.setItem('items', JSON.stringify(items));
        });
        deleteallBtn.addEventListener('click', () => {
            items = [];
            populateList(items, itemsList); // 更新列表
            localStorage.setItem('items', JSON.stringify(items));
        });

        /* 简易版 */
        // if (localStorage.length > 0) {
        //     for(let i = 0; i < localStorage.length; i++) {
        //         let key = localStorage.key(i);
        //         itemsList.innerHTML += `<li>${localStorage.getItem(key)}</li>`;
        //     }
        // }
        // submit.addEventListener('click', (e) => {
        //     e.preventDefault();
        //     if (input.value) {
        //         let key = new Date().valueOf();
        //         let value = input.value;
        //         localStorage.setItem(key, value);
        //         input.value = '';

        //         itemsList.innerHTML += `<li>${localStorage.getItem(key)}</li>`;
        //     }
        // });


    </script>


</body>

</html>